<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10- 购物车</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../bootstrap/jquery.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="https://unpkg.com/tween.js@16.3.4"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
    <style>
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2 class="text-center ">购物车</h2>
        <table class="table table-bordered table-hover table-condensed">
            <thead>
            <tr>
                <th class="text-center">商品编号</th>
                <th class="text-center">商品名称</th>
                <th class="text-center">购买数量</th>
                <th class="text-center">商品单价</th>
                <th class="text-center">商品总价</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in commodities" class="text-center">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <button class="btn btn-primary" @click="subtract(index)">-</button>
                    <input type="text" v-model="item.quantity">
                    <button class="btn btn-primary" @click="add(index)">+</button>
                </td>
                <td>{{item.price | filterMoney}}</td> <!-- 单价 -->
                <td>{{item.price*item.quantity | filterMoney}}</td> <!-- 总价-->
                <td>
                    <button class="btn btn-danger" @click="remove(index)">移除</button>
                </td>

            </tr>
            <tr>
                <td colspan="2">总数量：{{totalNum}}</td>
                <td colspan="2">总金额：{{totalMoney | filterMoney}}</td>
                <td colspan="2">
                    <button class="btn btn-danger" @click="empty()">清空购物车</button>
                </td>
            </tr>
            <tr v-show="commodities.length===0">
                <td colspan="6" class="text-center text-muted">
                    <p>您的购物车空空如也....</p>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<script>

    let vm = new Vue({ //父组件
        el: ".container",
        data() {
            return {
                commodities: [
                    {id: 1001, name: 'iphone5s', quantity: 3, price: 4000},
                    {id: 1005, name: 'iphone6', quantity: 9, price: 5000},
                    {id: 2001, name: 'imac', quantity: 4, price: 7000},
                    {id: 2004, name: 'ipad', quantity: 5, price: 2000}
                ]
            }

        },
        methods: {

            add: function (index) {
                this.commodities[index].quantity++;
            },
            subtract: function (index) {
                // 减去
                let item = this.commodities[index];
                if (item.quantity == 1) {
                    if (confirm(`确认要删除商品: ${item.name} 吗?`)) {
                        this.commodities.splice(index, 1)
                    }
                    return;
                }
                item.quantity--;
            },
            remove: function (index) {
                if (confirm(`确定要删除商品：${this.commodities[index].name} 吗？`)) {
                    this.commodities.splice(index, 1)
                }
            },
            empty: function () {
                // this.commodities.splice(0, this.commodities.length);
                if (confirm(`确定要删除购物车？`)) {
                    this.commodities = [];
                }
            }
        },
        filters: {
            filterMoney: (value) => {
                return '￥' + value;
            }
        },
        computed: {
            totalNum: function () {  //  计算数量
                var sum = 0;
                this.commodities.forEach(function (item) { //ES5新增方法forEach()
                    sum += item.quantity;
                });
                return sum;
            },
            totalMoney: function () { // 计算价格
                /* var sum=0;
                 this.commodities.forEach(function(item){ //ES5新增方法forEach()
                     sum+=item.price*item.quantity;
                 });
                 return sum;*/
                return this.commodities.reduce(function (prev, cur, index, array) { //ES5新增方法reduce()
                    return prev + cur.price * cur.quantity;
                }, 0);
            }
        }


    })
</script>
</body>
</html>